<template>
  <div>
    <el-form ref="form" :model="form" label-position="right" size="mini" label-width="100px" :rules="rules">
      <el-alert show-icon title="任务资源：资源上传成功后，可以在工作流模型中供给任务节点进行引用" type="warning">
      </el-alert>
      <el-form-item label="资源类型" prop="resourceType" style="margin-top:20px;">
        <div style="display:flex;">
          <el-select v-model="form.resourceType" placeholder="选择资源类型" style="width:280px;" @change="onChange">
            <el-option value="1" label="文件资源">文件资源</el-option>
            <el-option value="2" label="数据源">数据源</el-option>
          </el-select>
          <treeselect v-if="form.resourceType === '1'" valueFormat="object" v-model="dirId" :options="fileResourcesList"
                      placeholder="请选择目录" :normalizer="normalizer" class="treeselect"></treeselect>
        </div>
        <!-- <el-select v-model="form.resourceType" placeholder="选择目录" style="width:280px;">
          <el-option value="1" label="文件资源">文件资源</el-option>
          <el-option value="2" label="数据源">数据源</el-option>
        </el-select> -->
        <fileList ref="fileList" v-if="form.resourceType === '1'" :dirId="get(dirId,'id','-1')" :fileList="fileList"
                  @delete="onDeleteFile">
        </fileList>
        <datasource ref="datasources" v-if="form.resourceType === '2'" :datasourcesList.sync="datasourcesList"
                    v-model="form.datasource" @delete="onDeleteDatasources"></datasource>
      </el-form-item>
      <el-form-item v-if="form.resourceType" label="上传资源">
        <el-button v-if="form.resourceType === '1'" type="primary" plain @click="fileUpdateDialog = true">上传文件资源</el-button>
        <el-button v-if="form.resourceType === '2'" type="primary" plain @click="dialogVisible=true">创建数据源</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="上传文件资源" :visible.sync="fileUpdateDialog" width="auto" append-to-body>
      <m-file-update type="FILE" @onProgressFileUpdate="onProgressFileUpdate" @onUpdateFileUpdate="onUpdateFileUpdate"
                     @onArchiveDefinition="onArchiveFileUpdate" @closeFileUpdate="closeFileUpdate" :dirId="get(dirId,'id','-1')"
                     :currentDirPath="get(dirId,'fullName','')"></m-file-update>
    </el-dialog>
    <el-dialog title="创建数据源" v-if="dialogVisible" :visible.sync="dialogVisible" width="auto" :append-to-body="true">
      <m-create-data-source :item="''" @onUpdate="onUpdate" @close="close"></m-create-data-source>
    </el-dialog>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { mapActions } from 'vuex'
  import fileList from './fileList'
  import datasource from './datasource'
  import Treeselect from '@riophae/vue-treeselect'
  // import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import mFileUpdate from '@/module/components/fileUpdate/fileUpdate'
  import mCreateDataSource from '@/conf/home/pages/resource/pages/datasource/pages/list/_source/createDataSource'

  export default {
    components: {
      mFileUpdate,
      mCreateDataSource,
      fileList,
      Treeselect,
      datasource
    },
    data () {
      return {
        get: _.get,
        dialogVisible: false,
        fileUpdateDialog: false,
        progress: 0,
        isUpdate: false,
        rules: [],
        form: {
          resourceType: ''
        },
        dirId: null,
        currentDirPath: '/',
        fileResourcesList: [],
        datasourcesList: [],
        fileList: [],
        normalizer (node) {
          return {
            id: node.id,
            label: node.fullName,
            children: node.children
          }
        }
      }
    },
    watch: {
      form: {
        deep: true,
        immediate: true,
        handler: function (newval) {
          this.$emit('input', newval)
        }
      }
    },
    computed: {
      resourceName () {
        let { resourceType } = this.form
        if (resourceType === '1') {
          return _.get(this.form, 'file.alias') || '-'
        }
        if (resourceType === '2') {
          return _.get(this.form, 'datasource.name') || '-'
        }
        return ''
      }
    },
    created () {
    },
    methods: {
      ...mapActions('resource', ['getResourcesList']),
      onChange (value) {
        this.form.file = ''
        this.form.datasource = ''
        this.dirId = null
        if (value === '1') {
          this.getResourcesListTree()
        }
      },
      getResourcesListTree () {
        let searchParams = {
          type: 'FILE'
        }
        this.getResourcesList(searchParams).then(res => {
          let filterList = (myList) => {
            return myList.filter(item => {
              return item.dirctory // 过滤条件
            }).map(item => {
              item = Object.assign({}, item)
              if (item.children) {
                item.children = filterList(item.children)
              }
              return item
            })
          }
          let fileResourcesList = filterList(res.data)
          console.log('fileResourcesList', fileResourcesList)
          this.fileResourcesList = fileResourcesList
        }).catch(e => {
        })
      },
      onProgressFileUpdate (val) {
        this.progress = val
      },
      onUpdateFileUpdate (file) {
        this.isUpdate = false
        this.progress = 0
        this.fileUpdateDialog = false
        this.fileList.push(file)
      },
      onUploadFile () {
        this.isUpdate = false
        this.progress = 0
        this.fileUploadDialog = false
      },
      closeFileUpload () {
        this.progress = 0
        this.fileUploadDialog = false
      },
      onArchiveFileUpdate () {
        this.isUpdate = true
      },
      closeFileUpdate () {
        this.progress = 0
        this.fileUpdateDialog = false
      },
      onDeleteFile (index) {
        this.fileList.splice(index, 1)
      },
      onUpdate (data) {
        // this.$refs.datasources.addFile(data)
        this.datasourcesList.push(data)
        this.dialogVisible = false
      },
      onDeleteDatasources (index) {
        this.datasourcesList.splice(index, 1)
      },
      close () {
        this.dialogVisible = false
      },
      validate () {
        return new Promise((resolve, reject) => {
          return resolve()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep.el-button {
    width: 120px;
}
.title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
}
</style>
